<template>
  <div class="app-container" style="background: #fff">
    <ehead :showmenu="false"></ehead>
    <div style="background-color: #fff" class="p-2">
      <div class="content">
        <div style="width: 500px; padding: 30px 0; margin: 0 auto">
          <el-input
            v-model="value"
            size="large"
            placeholder="请输入模版关键词"
            style="max-width: 600px; border: 2px #fed440 solid"
            prefix-icon="Search"
          >
            <template #append>
              <el-button size="large" style="background-color: #fed440" @click="sousuo">搜索</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div style="background-color: #fff" class="p-2">
      <div
        class="content"
        style="padding: 10px 24px; font-size: 14px; border-radius: 9px; box-shadow: 0 1px 6px 0 rgb(23 47 67 / 10%)"
      >
        <div
          class="border p-4 float-left m-2 himg"
          :class="{ selected2: isSelected(-1) }"
          @click="
            selectedIndex = -1;
            selectItem1(-1, { cName: '全部' });
          "
        >
          全部模版
        </div>
        <div
          v-for="(item, index) in btnList"
          :key="index"
          :class="{ selected2: isSelected(index) }"
          class="himg border p-4 float-left m-2"
          @click="
            selectedIndex = index;
            selectItem1(index, item);
          "
        >
          {{ item.cName }}
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div style="background-color: #fff" class="p-2">
      <div
        class="content"
        style="padding: 10px 24px; font-size: 14px; border-radius: 9px; box-shadow: 0 1px 6px 0 rgb(23 47 67 / 10%)"
      >
        <div v-show="isAll">
          <div
            v-for="(o, i) in tempaltelist"
            :key="o"
            class="center"
            style="
              margin-top: 10px;
              margin-right: 10px;
              margin-left: 10px;
              background-color: #fff;
              border-radius: 20rpx;
            "
          >
            <div style="width: 100%">
              <div style="padding-top: 20px; padding-right: 10px; padding-left: 10px">
                <div
                  style="
                    float: left;
                    padding-right: 20px;
                    font-size: 32px;
                    font-weight: bold;
                    color: #000;
                    text-align: justify;
                    border-right: 10px #fed440 solid;
                  "
                >
                  {{ o.catName }}
                </div>
                <div
                  style="
                    float: left;
                    padding-top: 6px;
                    margin-left: 20px;
                    font-size: 24px;
                    color: rgb(154 154 154 / 100%);
                  "
                >
                  {{ o.catInfo }}
                </div>
                <div
                  class="float-right flex items-center justify-center"
                  style="padding-right: 20rpx; font-size: 30rpx"
                  @click="selectItem1(i, o)"
                >
                  更多
                </div>
                <div style="clear: both"></div>
              </div>
              <div style="margin-top: 20px">
                <el-row gutter="20">
                  <el-col :span="8" v-for="(item, index) in o.tmpList" :key="index" @click="previewmb(item)">
                    <div @click="yymb(item)" class="border p-2 mt-4">
                      <img
                        :src="item.coverImg"
                        style="width: 80%; height: auto; margin: 0 auto; object-fit: contain; border-radius: 8px"
                        alt="描述文字"
                      />

                      <div
                        class="grid-text my-2"
                        style="font-size: 28px; color: rgb(51 51 51 / 100%); text-align: center"
                      >
                        {{ item.tName }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div v-show="!isAll">
          <div
            class="center"
            style="
              margin-top: 10px;
              margin-right: 10px;
              margin-left: 10px;
              background-color: #fff;
              border-radius: 20rpx;
            "
          >
            <div style="width: 100%">
              <div style="padding-top: 0; padding-right: 10px; padding-left: 10px">
                <div
                  style="
                    float: left;
                    padding-right: 20px;
                    font-size: 32px;
                    font-weight: bold;
                    color: #000;
                    text-align: justify;
                    border-right: 10px #fed440 solid;
                  "
                >
                  {{ title3 }}
                </div>

                <div
                  class="float-right flex items-center justify-center"
                  style="padding-right: 20rpx; font-size: 30rpx"
                  @click="selectItem1(i, o)"
                >
                  更多
                </div>
                <div style="clear: both"></div>
              </div>
              <div style="margin-top: 20px">
                <el-row gutter="20">
                  <el-col :span="8" v-for="(item, i) in list3" :key="item" @click="previewmb(item)">
                    <div @click="yymb(item)" class="border p-2 mt-4">
                      <img
                        :src="item.coverImg"
                        style="width: 80%; height: auto; margin: 0 auto; object-fit: contain; border-radius: 8px"
                        alt="描述文字"
                      />

                      <div
                        class="grid-text my-2"
                        style="font-size: 28px; color: rgb(51 51 51 / 100%); text-align: center"
                      >
                        {{ item.tName }}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <efoot></efoot>
    <el-dialog class="no-header-dialog" v-model="perviewdialogVisible" title="二维码预览" width="400">
      <div class="relative" style="height: 720px">
        <div class="absolute top-0 right-0 cursor-pointer" @click="perviewdialogVisible = false">
          <el-icon color="#fff" size="20"><CircleClose /></el-icon>
        </div>
        <perview :list="mblist" :title="mbtitle" />
        <div style="clear: both"></div>
        <div class="text-center">
          <el-button-group>
            <el-button type="primary" @click="sc">收藏</el-button>
            <el-button type="primary" @click="usemb">使用</el-button>
          </el-button-group>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue';

import { templatecategory_list, i46_toptpcategory_list, tempalte_list } from '@/api/index.js';
//const showToast = inject("showToast");
import ehead from '@/views/components/index/head.vue';
import efoot from '@/views/components/index/foot.vue';
import perview from '@/views/editor/components/preview.vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const loading = ref(true);
loading.value = false;
let isAll = ref(true);
let btnList = ref([]);
let tempaltelist = ref([]);
let selectedIndex = ref(-1);
function isSelected(index) {
  console.log('index:', selectedIndex.value, selectedIndex.value === index);
  return selectedIndex.value === index;
}
onMounted(() => {
  templatecategory_list().then((res) => {
    btnList.value = res.data.data.listdata;
  });
  i46_toptpcategory_list(3).then((res) => {
    res.data.data.listdata.forEach((element) => {
      element.cName = element.catIcon;
    });
    tempaltelist.value = res.data.data.listdata;
  });
});
let title3 = ref('');
let value = ref('');
let list3 = ref([]);
function sousuo() {
  if (value.value === '') {
    // this.selectedItemIndex1 = this.btnlist.length - 2
    isAll.value = true;
  } else {
    selectedIndex.value = -2;
    isAll.value = false;
    title3.value = '搜索结果';
    tempalte_list({ tName: value.value }).then((res3) => {
      console.log('res3', res3);
      list3.value = res3.data.data.listdata;
    });
  }
}
function selectItem1(index, item) {
  console.log('item:', item);
  selectedIndex.value = index;
  // this.selectedItemIndex2 = null
  // if (this.selectedItemIndex1 === 0) {
  //   this.title3 = '场景全部'
  //   tempalte_list({ tcId: -1 }).then((res3) => {
  //     console.log('res3', res3)
  //     this.list3 = res3.data.listdata
  //   })
  // }
  // else {
  if (item.cName === '全部') {
    isAll.value = true;
  } else {
    isAll.value = false;
    title3.value = item.cName || item.catName;
    //this.catInfo = item.catInfo;
    tempalte_list({ tcId: item.id || item.catId }).then((res3) => {
      console.log('res3', res3);
      list3.value = res3.data.data.listdata;
    });
  }
}
const perviewdialogVisible = ref(false);
const mbid = ref(0);
const mblist = ref([]);
const mbtitle = ref('');
function previewmb(item) {
  console.log('item', item);
  mbid.value = item.id;
  mbtitle.value = item.tName;
  mblist.value = JSON.parse(item.tJson);
  perviewdialogVisible.value = true;
}
function usemb() {
  router.push('/v3?tid=' + mbid.value);
}
function sc() {
  i14_favorite_one3(mbid.value).then((res) => {
    ElMessage({
      message: '收藏成功！',
      type: 'success',
    });
  });
}
</script>
<style scoped lang="less">
.no-header-dialog {
  background: transparent !important;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 8px 20px rgb(0 0 0 / 0%);
}

.no-header-dialog .el-dialog__header {
  display: none;
}

.himg:hover {
  border: 1px solid rgba(250, 210, 0, 1);
  color: rgba(250, 210, 0, 1);
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.selected2 {
  border: 1px solid rgba(250, 210, 0, 1);
  color: rgba(250, 210, 0, 1);
}
.c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 20rpx;
  min-width: 1200px;
}
.cc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 40rpx;
}
</style>

